<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Limitless - Responsive Web Application Kit by Eugene Kopyov</title>

	<!-- Global stylesheets -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
	<link href="assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/bootstrap_limitless.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/layout.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/components.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/colors.min.css" rel="stylesheet" type="text/css">
	<!-- /global stylesheets -->

	<!-- Core JS files -->
	<script src="assets/js/main/jquery.min.js"></script>
	<script src="assets/js/main/bootstrap.bundle.min.js"></script>
	<!-- /core JS files -->

	<!-- Theme JS files -->
	<script src="assets/js/plugins/prism.min.js"></script>
	<script src="assets/js/plugins/sticky.min.js"></script>
	
	<script src="assets/js/main/app.js"></script>
	<script src="assets/js/pages/components_scrollspy.js"></script>
	<!-- /theme JS files -->

</head>

<body data-spy="scroll" data-target=".sidebar-component-right">

	<!-- Main navbar -->
	<div class="navbar navbar-expand-md navbar-light">
		<div class="navbar-header navbar-dark d-none d-md-flex align-items-md-center">
			<div class="navbar-brand navbar-brand-md">
				<a href="index.html" class="d-inline-block">
					<img src="assets/images/logo_light.png" alt="">
				</a>
			</div>
	
			<div class="navbar-brand navbar-brand-xs">
				<a href="index.html" class="d-inline-block">
					<img src="assets/images/logo_icon_light.png" alt="">
				</a>
			</div>
		</div>

		<div class="d-flex flex-1 d-md-none">
			<div class="navbar-brand mr-auto">
				<a href="index.html" class="d-inline-block">
					<img src="assets/images/logo_dark.png" alt="">
				</a>
			</div>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-mobile">
				<i class="icon-tree5"></i>
			</button>
			<button class="navbar-toggler sidebar-mobile-main-toggle" type="button">
				<i class="icon-paragraph-justify3"></i>
			</button>
			<button class="navbar-toggler sidebar-mobile-component-toggle" type="button">
				<i class="icon-unfold"></i>
			</button>
		</div>

		<div class="collapse navbar-collapse" id="navbar-mobile">
			<ul class="navbar-nav">
				<li class="nav-item">
					<a href="#" class="navbar-nav-link sidebar-control sidebar-main-hide d-none d-md-block">
						<i class="icon-paragraph-justify3"></i>
					</a>
				</li>

				<li class="nav-item">
					<a href="#" class="navbar-nav-link sidebar-control sidebar-component-toggle d-none d-md-block">
						<i class="icon-transmission"></i>
					</a>
				</li>
			</ul>

			<ul class="navbar-nav ml-md-auto">
				<li class="nav-item dropdown">
					<a href="#" class="navbar-nav-link">
						<i class="icon-history mr-2"></i>
						Changelog
						<span class="badge bg-warning-400 badge-pill position-static ml-md-2">2.0</span>
					</a>					
				</li>
			</ul>
		</div>
	</div>
	<!-- /main navbar -->


	<!-- Page content -->
	<div class="page-content">

		<!-- Main sidebar -->
		<div class="sidebar sidebar-dark sidebar-main sidebar-expand-md">

			<!-- Sidebar mobile toggler -->
			<div class="sidebar-mobile-toggler text-center">
				<a href="#" class="sidebar-mobile-main-toggle">
					<i class="icon-arrow-left8"></i>
				</a>
				Navigation
				<a href="#" class="sidebar-mobile-expand">
					<i class="icon-screen-full"></i>
					<i class="icon-screen-normal"></i>
				</a>
			</div>
			<!-- /sidebar mobile toggler -->


			<!-- Sidebar content -->
			<div class="sidebar-content">

        		<!-- Support -->
				<div class="card card-body">
					<a href="http://kopyov.ticksy.com" class="btn bg-success-400 btn-block" target="_blank"><i class="icon-lifebuoy mr-2"></i> Limitless support</a>
				</div>
				<!-- /support -->


				<!-- Main navigation -->
				<div class="card card-sidebar-mobile">
					<ul class="nav nav-sidebar" data-nav-type="accordion">
						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Main</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="index.html" class="nav-link">Introduction</a></li>
						<li class="nav-item"><a href="main_getting_started.html" class="nav-link">Getting started</a></li>
						<li class="nav-item"><a href="main_starter_kit.html" class="nav-link">Starter kit</a></li>
						<li class="nav-item"><a href="main_rtl.html" class="nav-link">RTL layout</a></li>

						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Basic functionality</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="base_scss_css.html" class="nav-link">SCSS and CSS</a></li>
						<li class="nav-item"><a href="base_scss_compile.html" class="nav-link">Compiling SCSS</a></li>
						<li class="nav-item nav-item-submenu nav-item-expanded nav-item-open">
							<a href="#" class="nav-link">Plugins</a>
							<ul class="nav nav-group-sub" data-submenu-title="Plugins">
								<li class="nav-item"><a href="plugins_forms.html" class="nav-link">Forms</a></li>
								<li class="nav-item"><a href="plugins_forms_styling.html" class="nav-link">Form styling</a></li>
								<li class="nav-item"><a href="plugins_editors.html" class="nav-link">Editors</a></li>
								<li class="nav-item"><a href="plugins_uploaders.html" class="nav-link active">Uploaders</a></li>
								<li class="nav-item"><a href="plugins_extensions.html" class="nav-link">Extensions</a></li>
								<li class="nav-item"><a href="plugins_notifications.html" class="nav-link">Notifications</a></li>
								<li class="nav-item"><a href="plugins_pickers.html" class="nav-link">Pickers</a></li>
								<li class="nav-item"><a href="plugins_tables.html" class="nav-link">Tables</a></li>
								<li class="nav-item"><a href="plugins_ui.html" class="nav-link">UI</a></li>
								<li class="nav-item"><a href="plugins_vis.html" class="nav-link">Visualization</a></li>
							</ul>
						</li>

						<li class="nav-item"><a href="base_bootstrap.html" class="nav-link">Bootstrap</a></li>
						<li class="nav-item"><a href="base_color_system.html" class="nav-link">Color system</a></li>
						<li class="nav-item"><a href="base_helpers.html" class="nav-link">Helpers</a></li>
						<li class="nav-item"><a href="base_themes.html" class="nav-link">Themes</a></li>

						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Layout options</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="layout_overview.html" class="nav-link">Layouts</a></li>
						<li class="nav-item"><a href="layout_sidebars.html" class="nav-link">Sidebars</a></li>
						<li class="nav-item"><a href="layout_navbars.html" class="nav-link">Navbars</a></li>
						<li class="nav-item"><a href="layout_v_nav.html" class="nav-link">Vertical navigation</a></li>
						<li class="nav-item"><a href="layout_h_nav.html" class="nav-link">Horizontal navigation</a></li>
						<li class="nav-item"><a href="layout_page_header.html" class="nav-link">Page header</a></li>

						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Other</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="other_credits.html" class="nav-link">Sources and credits</a></li>
						<li class="nav-item"><a href="other_changelog.html" class="nav-link">Changelog <span class="badge badge-pill bg-warning-400 ml-auto">version 2.0</span></a></li>
					</ul>
				</div>
			</div>
			<!-- /main navigation -->

		</div>
		<!-- /main sidebar -->


		<!-- Main content -->
		<div class="content-wrapper">

			<!-- Page header -->
			<div class="page-header">
				<div class="page-header-content header-elements-md-inline">
					<div class="page-title d-flex">
						<h4><i class="icon-arrow-left52 mr-2"></i> <span class="font-weight-semibold">Limitless</span> - Uploaders</h4>
						<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
					</div>

					<div class="header-elements d-none py-0 mb-3 mb-md-0">
						<div class="breadcrumb">
							<a href="index.html" class="breadcrumb-item"><i class="icon-home2 mr-2"></i> Home</a>
							<span class="breadcrumb-item active">Uploaders</span>
						</div>
					</div>
				</div>
			</div>
			<!-- /page header -->
			

			<!-- Content area -->
			<div class="content pt-0">

				<!-- Inner container -->
				<div class="d-flex align-items-start flex-column flex-md-row">

					<!-- Left content -->
					<div class="order-2 order-md-1">

							<!-- Dropzone -->
							<div class="card" id="dropzone">
								<div class="card-header header-elements-md-inline">
									<h5 class="card-title">Dropzone</h5>
									<div class="header-elements d-flex justify-content-between">
										<span class="badge bg-slate">Uploaders</span>
										<span class="text-muted mx-3">dropzone.min.js</span>
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
									</div>
								</div>

								<div class="card-body">
									<div class="mb-4">
										<h6 class="font-weight-semibold">Overview</h6>
										<p class="mb-3">Dropzone.js is a light weight JavaScript library that turns an HTML element into a dropzone. This means that a user can drag and drop a file onto it, and the file gets uploaded to the server via AJAX. Dropzone does not handle your file uploads on the server. You have to implement the code to receive and store the file yourself.</p>

										<p>Main features:</p>
										<ul class="list">
											<li>Image thumbnail previews. Simply register the callback <code>thumbnail(file, data)</code> and display the image wherever you like</li>
											<li>Retina enabled</li>
											<li>Multiple files and synchronous uploads</li>
											<li>Progress updates</li>
											<li>Support for large files</li>
											<li>Complete theming. The look and feel of Dropzone is just the default theme. You
											can define everything yourself by overwriting the default event listeners.</li>
											<li>Well tested</li>
										</ul>
									</div>

									<div class="mb-4">
										<h6 class="font-weight-semibold">Usage</h6>
										<div class="mb-3">
											<p>Include the following lines of code in the <code>&lt;head></code> section of your HTML:</p>
											<pre><code class="language-markup">&lt;!-- Load jQuery -->
&lt;script src="../../../../global_assets/js/main/jquery.min.js">&lt;/script>

&lt;!-- Load plugin -->
&lt;script src="../../../../global_assets/js/plugins/uploaders/dropzone.min.js">&lt;/script>
</code></pre>
										</div>

										<div class="mb-3">
											<p>Add form element with attributes:</p>
											<pre><code class="language-markup">&lt;!-- Add form markup -->
&lt;form action="#" class="dropzone" id="dropzone_multiple">&lt;/form>
</code></pre>
										</div>

										<div class="mb-3">
											<p>Call the plugin via JavaScript:</p>
											<pre><code class="language-javascript">// Multiple files upload
$("#dropzone_multiple").dropzone({
    paramName: "file", // The name that will be used to transfer the file
    dictDefaultMessage: 'Drop files to upload &lt;span>or CLICK&lt;/span>',
    maxFilesize: 0.1 // MB
});
</code></pre>
										</div>
									</div>

									<div class="mb-4">
										<h6 class="font-weight-semibold">Plugin options</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Option</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<th colspan="2" class="active">Core options</th>
													</tr>
													<tr>
														<td><code>url</code></td>
														<td>Has to be specified on elements other than form (or when the form doesn't have an action attribute). You can also provide a function that will be called with files and must return the url</td>
													</tr>
													<tr>
														<td><code>method</code></td>
														<td>Defaults to <code>"post"</code> and can be changed to <code>"put"</code> if necessary. You can also provide a function that will be called with files and must return the method</td>
													</tr>
													<tr>
														<td><code>parallelUploads</code></td>
														<td>How many file uploads to process in parallel</td>
													</tr>
													<tr>
														<td><code>maxFilesize</code></td>
														<td>in MB</td>
													</tr>
													<tr>
														<td><code>filesizeBase</code></td>
														<td>Defaults to 1000. This defines whether a base of 1000 or 1024 should be used to calculate file sizes. 1000 is correct, because 1000 Bytes equal 1 Kilobyte, and 1024 Bytes equal 1 Kibibyte. You can change this to 1024 if you don't care about validity.</td>
													</tr>
													<tr>
														<td><code>paramName</code></td>
														<td>The name of the file param that gets transferred. Defaults to <code>file</code>. NOTE: If you have the option <code>uploadMultiple</code> set to <code>true</code>, then Dropzone will append <code>[]</code> to the name.</td>
													</tr>
													<tr>
														<td><code>uploadMultiple</code></td>
														<td>Whether Dropzone should send multiple files in one request. If this it set to true, then the fallback file input element will have the multiple attribute as well. This option will also trigger additional events (like <code>processingmultiple</code>)</td>
													</tr>
													<tr>
														<td><code>headers</code></td>
														<td>An object to send additional headers to the server. Eg: <code>headers: { "My-Awesome-Header": "header value" }</code></td>
													</tr>
													<tr>
														<td><code>addRemoveLinks</code></td>
														<td>This will add a link to every file preview to remove or cancel (if already uploading) the file. The <code>dictCancelUpload</code>, <code>dictCancelUploadConfirmation</code> and <code>dictRemoveFile</code> options are used for the wording.</td>
													</tr>
													<tr>
														<td><code>previewsContainer</code></td>
														<td>Defines where to display the file previews – if <code>null</code> the Dropzone element is used. Can be a plain <code>HTMLElement</code> or a CSS selector. The element should have the <code>dropzone-previews</code> class so the previews are displayed properly.</td>
													</tr>
													<tr>
														<td><code>clickable</code></td>
														<td>If <code>true</code>, the dropzone element itself will be clickable, if <code>false</code> nothing will be clickable. Otherwise you can pass an HTML element, a CSS selector (for multiple elements) or an array of those.</td>
													</tr>
													<tr>
														<td><code>maxThumbnailFilesize</code></td>
														<td>In MB. When the filename exceeds this limit, the thumbnail will not be generated.</td>
													</tr>
													<tr>
														<td><code>thumbnailWidth</code></td>
														<td>If <code>null</code>, the ratio of the image will be used to calculate it.</td>
													</tr>
													<tr>
														<td><code>thumbnailHeight</code></td>
														<td>The same as <code>thumbnailWidth</code>. If both are <code>null</code>, images will not be resized.</td>
													</tr>
													<tr>
														<td><code>maxFiles</code></td>
														<td>If not <code>null</code> defines how many files this Dropzone handles. If it exceeds, the event <code>maxfilesexceeded</code> will be called. The dropzone element gets the class <code>dz-max-</code> files-reached accordingly so you can provide visual feedback.</td>
													</tr>
													<tr>
														<td><code>resize</code></td>
														<td>Is the function that gets called to create the resize information. It gets the file as first parameter and must return an object with <code>srcX</code>, <code>srcY</code>, <code>srcWidth</code> and <code>srcHeight</code> and the same for <code>trg*</code>. Those values are going to be used by <code>ctx.drawImage()</code>.</td>
													</tr>
													<tr>
														<td><code>init</code></td>
														<td>Is a function that gets called when Dropzone is initialized. You can setup event listeners inside this function.</td>
													</tr>
													<tr>
														<td><code>acceptedFiles</code></td>
														<td>The default implementation of accept checks the file's mime type or extension against this list. This is a comma separated list of mime types or file extensions. Eg.: <code>image/*,application/pdf,.psd</code>. If the Dropzone is clickable this option will be used as accept parameter on the hidden file input as well.</td>
													</tr>
													<tr>
														<td><code>accept</code></td>
														<td>Is a function that gets a file and a <code>done</code> function as parameter. If the done function is invoked without a parameter, the file will be processed. If you pass an error message it will be displayed and the file will not be uploaded. This function will not be called if the file is too big or doesn't match the mime types.</td>
													</tr>
													<tr>
														<td><code>autoProcessQueue</code></td>
														<td>When set to false you have to call <code>myDropzone.processQueue()</code> yourself in order to upload the dropped files. See below for more information on handling queues.</td>
													</tr>
													<tr>
														<td><code>previewTemplate</code></td>
														<td>Is a string that contains the template used for each dropped image. Change it to fulfill your needs but make sure to properly provide all elements. You can include the HTML in your page in a <strong>&lt;div id="preview-template" style="display: none;">&lt;/div></strong> container, and set it like this: <code>previewTemplate: document.querySelector('preview-template').innerHTML</code>.</td>
													</tr>
													<tr>
														<td><code>forceFallback</code></td>
														<td>Defaults to <code>false</code>. If <code>true</code> the fallback will be forced. This is very useful to test your server implementations first and make sure that everything works as expected without dropzone if you experience problems, and to test how your fallbacks will look.</td>
													</tr>
													<tr>
														<td><code>fallback</code></td>
														<td>Is a function that gets called when the browser is not supported. The default implementation shows the fallback input field and adds a text.</td>
													</tr>

													<tr>
														<th colspan="2" class="active">To translate dropzone, you can also provide these options:</th>
													</tr>
													<tr>
														<td><code>dictDefaultMessage</code></td>
														<td>The message that gets displayed before any files are dropped. This is normally replaced by an image but defaults to "Drop files here to upload"</td>
													</tr>
													<tr>
														<td><code>dictFallbackMessage</code></td>
														<td>If the browser is not supported, the default message will be replaced with this text. Defaults to "Your browser does not support drag'n'drop file uploads."</td>
													</tr>
													<tr>
														<td><code>dictFallbackText</code></td>
														<td>This will be added before the file input files. If you provide a fallback element yourself, or if this option is <code>null</code> this will be ignored. Defaults to "Please use the fallback form below to upload your files like in the olden days."</td>
													</tr>
													<tr>
														<td><code>dictInvalidFileType</code></td>
														<td>Shown as error message if the file doesn't match the file type.</td>
													</tr>
													<tr>
														<td><code>dictFileTooBig</code></td>
														<td>Shown when the file is too big. <code>{{filesize}}</code> and <code>{{maxFilesize}}</code> will be replaced.</td>
													</tr>
													<tr>
														<td><code>dictResponseError</code></td>
														<td>Shown as error message if the server response was invalid. <code>{{statusCode}}</code> will be replaced with the servers status code.</td>
													</tr>
													<tr>
														<td><code>dictCancelUpload</code></td>
														<td>If <code>addRemoveLinks</code> is <code>true</code>, the text to be used for the cancel upload link.</td>
													</tr>
													<tr>
														<td><code>dictCancelUploadConfirmation</code></td>
														<td>If <code>addRemoveLinks</code> is <code>true</code>, the text to be used for confirmation when cancelling upload.</td>
													</tr>
													<tr>
														<td><code>dictRemoveFile</code></td>
														<td>If <code>addRemoveLinks</code> is <code>true</code>, the text to be used to remove a file.</td>
													</tr>
													<tr>
														<td><code>dictMaxFilesExceeded</code></td>
														<td>If <code>maxFiles</code> is set, this will be the error message when it's exceeded.</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div class="mb-4">
										<h6 class="font-weight-semibold">Plugin events</h6>
										<p>Do not overwrite those as configuration options, unless you know what you're doing:</p>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Event</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<th colspan="2" class="active">All of these receive the <code>event</code> as first parameter:</th>
													</tr>
													<tr>
														<td><code>drop</code></td>
														<td>The user dropped something onto the dropzone</td>
													</tr>
													<tr>
														<td><code>dragstart</code></td>
														<td>The user started to drag anywhere</td>
													</tr>
													<tr>
														<td><code>dragend</code></td>
														<td>Dragging has ended</td>
													</tr>
													<tr>
														<td><code>dragenter</code></td>
														<td>The user dragged a file onto the Dropzone</td>
													</tr>
													<tr>
														<td><code>dragover</code></td>
														<td>The user is dragging a file over the Dropzone</td>
													</tr>
													<tr>
														<td><code>dragleave</code></td>
														<td>The user dragged a file out of the Dropzone</td>
													</tr>

													<tr>
														<th colspan="2" class="active">All of these receive the <code>file</code> as first parameter:</th>
													</tr>
													<tr>
														<td><code>addedfile</code></td>
														<td>When a file is added to the list</td>
													</tr>
													<tr>
														<td><code>removedfile</code></td>
														<td>Called whenever a file is removed from the list. You can listen to this and delete the file from your server if you want to</td>
													</tr>
													<tr>
														<td><code>thumbnail</code></td>
														<td>When the thumbnail has been generated. Receives the <code>dataUrl</code> as second parameter</td>
													</tr>
													<tr>
														<td><code>error</code></td>
														<td>An error occured. Receives the <code>errorMessage</code> as second parameter and if the error was due to the XMLHttpRequest the xhr object as third</td>
													</tr>
													<tr>
														<td><code>processing</code></td>
														<td>When a file gets processed (since there is a queue not all files are processed immediately)</td>
													</tr>
													<tr>
														<td><code>uploadprogress</code></td>
														<td>Gets called periodically whenever the file upload progress changes. Gets the progress parameter as second parameter which is a percentage (0-100) and the <code>bytesSent</code> parameter as third which is the number of the bytes that have been sent to the server. When an upload finishes dropzone ensures that <code>uploadprogress</code> will be called with a percentage of 100 at least once. <strong>Warning:</strong> This function can potentially be called with the same progress multiple times</td>
													</tr>
													<tr>
														<td><code>sending</code></td>
														<td>Called just before each file is sent. Gets the xhr object and the <code>formData</code> objects as second and third parameters, so you can modify them (for example to add a CSRF token) or add additional data</td>
													</tr>
													<tr>
														<td><code>success</code></td>
														<td>The file has been uploaded successfully. Gets the server response as second argument</td>
													</tr>
													<tr>
														<td><code>complete</code></td>
														<td>Called when the upload was either successful or erroneous</td>
													</tr>
													<tr>
														<td><code>canceled</code></td>
														<td>Called when a file upload gets canceled</td>
													</tr>
													<tr>
														<td><code>maxfilesreached</code></td>
														<td>Called when the number of files accepted reaches the <code>maxFiles</code> limit</td>
													</tr>
													<tr>
														<td><code>maxfilesexceeded</code></td>
														<td>Called for each file that has been rejected because the number of files exceeds the <code>maxFiles</code> limit</td>
													</tr>

													<tr>
														<th colspan="2" class="active">All of these receive a list of files as first parameter and are only called if the <code>uploadMultiple</code> option is <code>true</code>:</th>
													</tr>
													<tr>
														<td><code>processingmultiple</code></td>
														<td>See <code>processing</code> for description</td>
													</tr>
													<tr>
														<td><code>sendingmultiple</code></td>
														<td>See <code>sending</code> for description</td>
													</tr>
													<tr>
														<td><code>successmultiple</code></td>
														<td>See <code>success</code> for description</td>
													</tr>
													<tr>
														<td><code>completemultiple</code></td>
														<td>See <code>complete</code> for description</td>
													</tr>
													<tr>
														<td><code>canceledmultiple</code></td>
														<td>See <code>canceled</code> for description</td>
													</tr>

													<tr>
														<th colspan="2" class="active">Special events:</th>
													</tr>
													<tr>
														<td><code>totaluploadprogress</code></td>
														<td>Called with the total uploadProgress (0-100), the <code>totalBytes</code> and the <code>totalBytesSent</code>. This event can be used to show the overall upload progress of all files</td>
													</tr>
													<tr>
														<td><code>reset</code></td>
														<td>Called when all files in the list are removed and the dropzone is reset to initial state</td>
													</tr>
													<tr>
														<td><code>queuecomplete</code></td>
														<td>Called when all files in the queue finish uploading</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div>
										<h6 class="font-weight-semibold">Plugin info</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Property</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="font-weight-semibold">File name</td>
														<td>dropzone.min.js</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Location</td>
														<td>global_assets/js/plugins/uploaders/</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Links</td>
														<td>
															<p>
																<a href="http://www.dropzonejs.com/" class="btn btn-sm bg-danger-400 btn-labeled btn-labeled-left" target="_blank">
																	<b><i class="icon-mention"></i></b>
																	Official plugin website
																</a>
															</p>

															<p>
																<a href="https://github.com/enyo/dropzone/wiki" class="btn btn-sm bg-brown btn-labeled btn-labeled-left" target="_blank">
																	<b><i class="icon-book"></i></b>
																	Project wiki
																</a>
															</p>

															<p>
																<a href="http://www.dropzonejs.com/#configuration-options" class="btn btn-sm bg-slate btn-labeled btn-labeled-left" target="_blank">
																	<b><i class="icon-file-text2"></i></b>
																	Full documentation
																</a>
															</p>
															
															<a href="https://github.com/enyo/dropzone" class="btn btn-sm bg-blue btn-labeled btn-labeled-left" target="_blank">
																<b><i class="icon-github"></i></b>
																Github project page
															</a>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<!-- /dropzone -->


							<!-- Plupload -->
							<div class="card" id="plupload">
								<div class="card-header header-elements-md-inline">
									<h5 class="card-title">Plupload</h5>
									<div class="header-elements d-flex justify-content-between">
										<span class="badge bg-slate">Uploaders</span>
										<span class="text-muted mx-3">/uploaders/plupload/</span>
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
									</div>
								</div>

								<div class="card-body">
									<div class="mb-4">
										<h6 class="font-weight-semibold">Overview</h6>
										<p>Plupload is a cross-browser multi-runtime file uploading API. Basically, a set of tools that will help you to build a reliable and visually appealing file uploader in minutes.</p>

										<p>Historically, Plupload comes from a dark and hostile age of no HTML5, hence all the alternative fallbacks, like Flash, Silverlight and Java (still in development). It is meant to provide an API, that will work anywhere and in any case, in one way or another. While having very solid fallbacks, Plupload is built with the future of HTML5 in mind.</p>
									</div>

									<div class="mb-4">
										<h6 class="font-weight-semibold">Usage</h6>
										<div class="mb-3">
											<p>Include the following lines of code in the <code>&lt;head></code> section of your HTML:</p>
											<pre><code class="language-markup">&lt;!-- Load jQuery -->
&lt;script src="../../../../global_assets/js/main/jquery.min.js">&lt;/script>

&lt;!-- Load plugin -->
&lt;script src="../../../../global_assets/js/plugins/uploaders/plupload/plupload.full.min.js">&lt;/script>

&lt;!-- Load plugin extension -->
&lt;script src="../../../../global_assets/js/plugins/uploaders/plupload/plupload.queue.min.js">&lt;/script>
</code></pre>
										</div>

										<div class="mb-3">
											<p>Add element with attributes:</p>
											<pre><code class="language-markup">&lt;!-- All runtimes example -->
&lt;div class="file-uploader">
	&lt;p>Your browser doesn't have Flash installed.&lt;/p>
&lt;/div>
</code></pre>
										</div>

										<div class="mb-3">
											<p>Call the plugin via JavaScript:</p>
											<pre><code class="language-javascript">// All runtimes example
$(".file-uploader").pluploadQueue({
    runtimes: 'html5, html4, Flash, Silverlight',
    url: 'assets/demo_data/uploader/plupload.json',
    chunk_size: '300Kb',
    unique_names: true,
    filters: {
        max_file_size: '300Kb',
        mime_types: [{
            title: "Image files",
            extensions: "jpg,gif,png"
        }]
    },
    resize: {
        width: 320,
        height: 240,
        quality: 90
    }
});
</code></pre>
										</div>
									</div>

									<div class="mb-4">
										<h6 class="font-weight-semibold">Plupload documentation</h6>
										<p>Complete Plupload documentation can be found online on <a href="http://www.plupload.com/docs/" target="_blank">Official library website</a>. It's quite big, with a lot of <a href="http://www.plupload.com/docs/Options" target="_blank">options</a>, <a href="https://github.com/moxiecode/plupload/wiki/Uploader#events" target="_blank">events</a>, <a href="https://github.com/moxiecode/plupload/wiki/Uploader#methods" target="_blank">methods</a> and <a href="http://www.plupload.com/docs/File-Filters" target="_blank">file filters</a>. Also check out <a href="http://www.plupload.com/docs/Frequently-Asked-Questions" target="_blank">FAQ section</a> and <a href="http://www.plupload.com/docs/Plupload-in-Your-Language" target="_blank">translating options</a>. I find it useless to copy them all and paste to the Limitless documentation, nobody can represent and describe library features better than its creators. Below you can find additional links related to Plupload library.</p>
									</div>

									<div>
										<h6 class="font-weight-semibold">Plugin info</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Property</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="font-weight-semibold">File name</td>
														<td>plupload.full.min.js, moxie.min.js, plupload.queue.min.js</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Location</td>
														<td>global_assets/js/plugins/uploaders/plupload/</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Links</td>
														<td>
															<p>
																<a href="http://www.plupload.com/" class="btn btn-sm bg-danger-400 btn-labeled btn-labeled-left" target="_blank">
																	<b><i class="icon-mention"></i></b>
																	Official plugin website
																</a>
															</p>

															<p>
																<a href="https://github.com/moxiecode/plupload/wiki" class="btn btn-sm bg-brown btn-labeled btn-labeled-left" target="_blank">
																	<b><i class="icon-book"></i></b>
																	Project wiki
																</a>
															</p>

															<p>
																<a href="http://www.plupload.com/docs/" class="btn btn-sm bg-slate btn-labeled btn-labeled-left" target="_blank">
																	<b><i class="icon-file-text2"></i></b>
																	Full documentation
																</a>
															</p>
															
															<a href="https://github.com/moxiecode/plupload" class="btn btn-sm bg-blue btn-labeled btn-labeled-left" target="_blank">
																<b><i class="icon-github"></i></b>
																Github project page
															</a>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<!-- /plupload -->


							<!-- Bootstrap file upload -->
							<div class="card" id="fileinput">
								<div class="card-header header-elements-md-inline">
									<h5 class="card-title">Bootstrap file upload</h5>
									<div class="header-elements d-flex justify-content-between">
										<span class="badge bg-slate">Uploaders</span>
										<span class="text-muted mx-3">fileinput.min.js</span>
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
									</div>
								</div>

								<div class="card-body">
									<div class="mb-4">
										<h6 class="font-weight-semibold">Overview</h6>
										<p>An enhanced HTML 5 file input for Bootstrap 3.x with file preview for various files, offers multiple selection, and more. The plugin allows you a simple way to setup an advanced file picker/upload control built to work specially with Bootstrap CSS3 styles. It enhances the file input functionality further, by offering support to preview a wide variety of files i.e. images, text, html, video, audio, flash, and objects. <br>In addition, it includes AJAX based uploads, dragging &amp; dropping files, viewing upload progress, and selectively previewing, adding, or deleting files.</p>
									</div>

									<div class="mb-4">
										<h6 class="font-weight-semibold">Usage</h6>
										<div class="mb-3">
											<p>Include the following lines of code in the <code>&lt;head></code> section of your HTML:</p>
											<pre><code class="language-markup">&lt;!-- Load jQuery -->
&lt;script src="assets/js/main/jquery.min.js">&lt;/script>

&lt;!-- Load Bootstrap -->
&lt;script src="../../../../global_assets/js/core/libraries/bootstrap.min.js">&lt;/script>

&lt;!-- Load plugin -->
&lt;script src="../../../../global_assets/js/plugins/uploaders/fileinput.min.js">&lt;/script>
</code></pre>
										</div>

										<div class="mb-3">
											<p>Add file input element with attributes:</p>
											<pre><code class="language-markup">&lt;!-- Single file -->
&lt;input type="file" class="file-input">

&lt;!-- Multiple files -->											
&lt;input type="file" class="file-input" multiple="multiple">
</code></pre>
										</div>

										<div class="mb-3">
											<p>Call the plugin via JavaScript:</p>
											<pre><code class="language-javascript">// Basic setup
$('.file-input').fileinput({
    browseLabel: '',
    browseClass: 'btn btn-primary btn-icon',
    removeLabel: '',
    uploadLabel: '',
    uploadClass: 'btn btn-default btn-icon',
    browseIcon: '&lt;i class="icon-plus22">&lt;/i> ',
    uploadIcon: '&lt;i class="icon-file-upload">&lt;/i> ',
    removeClass: 'btn btn-danger btn-icon',
    removeIcon: '&lt;i class="icon-cancel-square">&lt;/i> ',
    layoutTemplates: {
        caption: '&lt;div tabindex="-1" class="form-control file-caption {class}">\n' + '&lt;span class="icon-file-plus kv-caption-icon">&lt;/span>&lt;div class="file-caption-name">&lt;/div>\n' + '&lt;/div>'
    },
    initialCaption: "No file selected"
});
</code></pre>
										</div>
									</div>

									<div class="mb-4">
										<h6 class="font-weight-semibold">Bootstrap file input documentation</h6>
										<p>Complete BS file input documentation can be found online on <a href="http://plugins.krajee.com/file-input#usage-modes" target="_blank">Official library website</a>. It's quite big, with tons of <a href="http://plugins.krajee.com/file-input#options" target="_blank">options</a>, <a href="http://plugins.krajee.com/file-input#events" target="_blank">events</a>, <a href="http://plugins.krajee.com/file-input#methods" target="_blank">methods</a> and <a href="http://plugins.krajee.com/file-input#ajax-uploads" target="_blank">AJAX uploads options</a>. I find it useless to copy them all and paste to the Limitless documentation, nobody can represent and describe library features better than its creators. Below you can find additional links related to BS file input library.</p>
									</div>

									<div>
										<h6 class="font-weight-semibold">Plugin info</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Property</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="font-weight-semibold">File name</td>
														<td>fileinput.min.js</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Location</td>
														<td>global_assets/js/plugins/uploaders/</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Links</td>
														<td>
															<p>
																<a href="http://plugins.krajee.com/file-input" class="btn btn-sm bg-danger-400 btn-labeled btn-labeled-left" target="_blank">
																	<b><i class="icon-mention"></i></b>
																	Official plugin website
																</a>
															</p>

															<p>
																<a href="http://plugins.krajee.com/file-input#usage-modes" class="btn btn-sm bg-slate btn-labeled btn-labeled-left" target="_blank">
																	<b><i class="icon-file-text2"></i></b>
																	Full documentation
																</a>
															</p>
															
															<a href="https://github.com/kartik-v/bootstrap-fileinput" class="btn btn-sm bg-blue btn-labeled btn-labeled-left" target="_blank">
																<b><i class="icon-github"></i></b>
																Github project page
															</a>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<!-- /bootstrap file upload -->

					</div>
					<!-- /left content -->


					<!-- Right sidebar component -->
					<div class="sidebar-sticky w-100 w-md-auto order-1 order-md-2">
						<div class="sidebar sidebar-light sidebar-component sidebar-component-right sidebar-expand-md mb-3">
							<div class="sidebar-content">
								<div class="card">
									<div class="card-header bg-transparent header-elements-inline">
										<span class="text-uppercase font-size-sm font-weight-semibold">Page navigation</span>
										<div class="header-elements">
											<div class="list-icons">
						                		<a class="list-icons-item" data-action="collapse"></a>
					                		</div>
				                		</div>
									</div>

									<div class="card-body">
										<a href="http://themeforest.net/user/kopyov" class="btn bg-blue btn-block" target="_blank"><i class="icon-reading mr-2"></i> Contact author</a>
									</div>

									<ul class="nav nav-sidebar nav-scrollspy" data-nav-type="accordion">
										<li class="nav-item-header pt-0"><div class="text-uppercase font-size-xs line-height-xs">Sections</div> <i class="icon-menu"></i></li>
										<li class="nav-item"><a href="#dropzone" class="nav-link">Dropzone</a></li>
										<li class="nav-item"><a href="#plupload" class="nav-link">Plupload</a></li>
										<li class="nav-item"><a href="#fileinput" class="nav-link">Bootstrap File Input</a></li>
										<li class="nav-item-divider"></li>
										<li class="nav-item"><a href="#" class="nav-link">Go to top <i class="icon-circle-up2 mr-0 ml-auto"></i></a></li>
									</ul>
								</div>
				            </div>
						</div>
					</div>
					<!-- /right sidebar component -->

				</div>
				<!-- /inner container -->

			</div>
			<!-- /content area -->


			<!-- Footer -->
			<div class="navbar navbar-expand-lg navbar-light">
				<div class="text-center d-lg-none w-100">
					<button type="button" class="navbar-toggler dropdown-toggle" data-toggle="collapse" data-target="#navbar-footer">
						<i class="icon-unfold mr-2"></i>
						Footer
					</button>
				</div>

				<div class="navbar-collapse collapse" id="navbar-footer">
					<span class="navbar-text">
						&copy; 2015 - 2018. <a href="#">Limitless Web App Kit</a> by <a href="http://themeforest.net/user/Kopyov" target="_blank">Eugene Kopyov</a>
					</span>

					<ul class="navbar-nav ml-lg-auto">
						<li class="nav-item"><a href="https://themeforest.net/item/limitless-responsive-web-application-kit/13080328?ref=kopyov" class="navbar-nav-link font-weight-semibold"><span class="text-pink-400"><i class="icon-cart2 mr-2"></i> Purchase</span></a></li>
					</ul>
				</div>
			</div>
			<!-- /footer -->

		</div>
		<!-- /main content -->

	</div>
	<!-- /page content -->

</body>
</html>
